<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>轱辘</title>
    <style>
      /*css reset*/
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      /*-- root html 全局变量--*/
      html {
        --button-height: 36px;
        --font-size: 14px;
        --button-bg: white;
        --button-active-bg: #eee;
        --border-radius: 4px;
        --color: #333;
        --border-color: #999;
        --border-hover-color: #666;
      }

      /*#app {*/
      /*    margin: 20px;*/
      /*}*/

      body {
        font-size: var(--font-size);
        font-family: -apple-system, "Helvetica Neue", Helvetica, "Nimbus Sans L",
          Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB",
          "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei",
          "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei,
          "WenQuanYi Zen Hei Sharp", sans-serif;
        padding: 100px;
      }

      .layout {
        height: 100vh;
        border: 1px solid red;
      }

      .demo {
        height: 100px;
        border: 1px solid black;
      }

      .sider {
        border: 1px solid black;
        width: 100px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <g-collapse>
        <g-collapse-item title="标题一">内容一</g-collapse-item>
        <g-collapse-item title="标题二">内容二</g-collapse-item>
        <g-collapse-item title="标题三">dddd</g-collapse-item>
      </g-collapse>

      <!--    <div >-->
      <!--    <g-popover position="left">-->
      <!--        <template slot="content">-->
      <!--        <div>-->
      <!--            55555propsxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-->
      <!--        </div>-->
      <!--        </template>-->
      <!--        <g-button>点击</g-button>-->
      <!--    </g-popover>-->
      <!--        <g-popover position="top">-->
      <!--        <template slot="content">-->
      <!--        <div>-->
      <!--            55555propsxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-->
      <!--        </div>-->
      <!--        </template>-->
      <!--        <g-button>点击</g-button>-->
      <!--    </g-popover><g-popover position="right">-->
      <!--        <template slot="content">-->
      <!--        <div>-->
      <!--            55555propsxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-->
      <!--        </div>-->
      <!--        </template>-->
      <!--        <g-button>点击</g-button>-->
      <!--    </g-popover>-->
      <!--        <g-popover position="bottom">-->
      <!--        <template slot="content">-->
      <!--        <div>-->
      <!--            55555propsxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-->
      <!--        </div>-->
      <!--        </template>-->
      <!--        <g-button>点击</g-button>-->
      <!--    </g-popover>-->
      <!--    </div>-->
      <!--    <div style="margin-top: 60px">-->
      <!--    <g-popover position="left" trigger="click">-->
      <!--        <template slot="content" slot-scope="{close}">-->
      <!--        <div>-->
      <!--            55555propsxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-->
      <!--            <g-button @click="close">关闭</g-button>-->
      <!--        </div>-->
      <!--        </template>-->
      <!--        <g-button>点击</g-button>-->
      <!--    </g-popover>-->
      <!--        <g-popover position="top" trigger="hover">-->
      <!--        <template slot="content">-->
      <!--        <div>-->
      <!--            55555propsxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-->
      <!--        </div>-->
      <!--        </template>-->
      <!--        <g-button>点击</g-button>-->
      <!--    </g-popover>-->
      <!--        <g-popover position="right" trigger="hover">-->
      <!--        <template slot="content">-->
      <!--        <div>-->
      <!--            55555propsxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-->
      <!--        </div>-->
      <!--        </template>-->
      <!--        <g-button>点击</g-button>-->
      <!--    </g-popover>-->
      <!--        <g-popover position="bottom" trigger="hover">-->
      <!--        <template slot="content">-->
      <!--        <div>-->
      <!--            55555propsxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-->
      <!--        </div>-->
      <!--        </template>-->
      <!--        <g-button>点击</g-button>-->
      <!--    </g-popover>-->
      <!--    </div>-->

      <!--    <g-tabs :selected-nav.sync="navName">-->
      <!--        <g-nav>-->
      <!--            <g-item name="sports">-->
      <!--                <g-icon icon="settings"></g-icon>-->
      <!--                体育-->
      <!--            </g-item>-->
      <!--            <g-item name="hot" disable>热点</g-item>-->
      <!--            <g-item name="cba">CBA</g-item>-->
      <!--            <template slot="actions">-->
      <!--                <g-button>设置</g-button>-->
      <!--            </template>-->
      <!--        </g-nav>-->
      <!--        <g-content>-->
      <!--            <g-pane name="sports"> 体育相关的资讯</g-pane>-->
      <!--            <g-pane name="hot"> 社会热点相关的资讯</g-pane>-->
      <!--            <g-pane name="cba"> cba相关的资讯</g-pane>-->
      <!--        </g-content>-->

      <!--    </g-tabs>-->

      <g-button @click="showToast">点他</g-button>
      <g-button @click="showToast1">点他</g-button>
      <g-button @click="showToast2">点他</g-button>

      <!--    <g-layout>-->
      <!--            <g-sider >4</g-sider>-->
      <!--        <g-layout>-->
      <!--        <g-header class="demo" >1</g-header>-->
      <!--        <g-content>2</g-content>-->
      <!--        <g-footer class="demo">3</g-footer>-->
      <!--        </g-layout>-->
      <!--    </g-layout>-->
      <!--    <g-row gutter="10">-->
      <!--        <g-clo span="24"-->
      <!--               :ipad="{span:12,offset:0}"-->
      <!--               :narrow-pc="{span:8}"-->
      <!--               :pc="{span:4}">1</g-clo>-->
      <!--        <g-clo span="24"-->
      <!--               :ipad="{span:12,offset:0}"-->
      <!--               :narrow-pc="{span:16}"-->
      <!--               :pc="{span:20}">2</g-clo>-->
      <!--    </g-row>-->
      <!--    <g-row gutter="20">-->
      <!--        <g-clo>1</g-clo>-->
      <!--        <g-clo>2</g-clo>-->
      <!--        <g-clo>3</g-clo>-->
      <!--    </g-row>-->
      <!--    <g-row align="left">-->
      <!--        <g-clo span="2">1</g-clo>-->
      <!--        <g-clo span="22" >3</g-clo>-->
      <!--    </g-row>-->
      <!--    <g-row align="center">-->
      <!--        <g-clo span="4">1</g-clo>-->
      <!--        <g-clo span="16" offset="4">3</g-clo>-->
      <!--    </g-row>-->
      <!--    <g-input v-model="message"></g-input>-->
      <!--    {{message}}-->
      <!--    <g-input value="张三"></g-input>-->
      <!--    <g-input value="李四" disabled></g-input>-->
      <!--    <g-input value="李四" readonly></g-input>-->
      <!--    <g-input value="我爱JS" error="您输入的字符不够五个字"></g-input>-->

      <!-- <div style="margin-top: 30px">-->
      <!-- <g-button icon="settings" :loading="loading1" @click="loading1=!loading1">
            下载
        </g-button> -->
      <!--        <g-button icon="settings" icon-position="right" :loading="loading2" @click.native="loading2=!loading2">-->
      <!--            设置-->
      <!--        </g-button>-->
      <!--        <g-button icon="up">-->
      <!--            向上-->
      <!--        </g-button>-->
      <!--        <g-button-group>-->
      <!--            <g-button icon="left">上一页</g-button>-->
      <!--            <g-button>更多</g-button>-->
      <!--            <g-button icon="right" icon-position="right">下一页</g-button>-->
      <!--        </g-button-group>-->
      <!--    </div> -->
    </div>
    <script src="./src/app.js"></script>
  </body>
</html>
